<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <script src="js/vue2.7.js" type="text/javascript" charset="UTF-8"></script>
    <script src="js/elementui.js" type="text/javascript" charset="UTF-8"></script>
    <script src="js/axios.min.js" type="text/javascript" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/ui.css"/>
</head>
<body>
    <div id="app">

        <h1>显示省级信息</h1>
        <el-table :data="tableData1.filter((v) => v.provinceName == '辽宁省')"  border style="width: 100%" >
            <el-table-column prop="locationId" label="省份编号" width="200"></el-table-column>
            <el-table-column fixed prop="provinceName" label="省份名称" width="200"></el-table-column>
            <el-table-column prop="confirmedCount" label="确诊人数" width="150"></el-table-column>
            <el-table-column prop="deadCount" label="死亡人数" width="150"></el-table-column>
        </el-table>
        
        <h1>显示市级信息</h1>
        <el-table :data="tableData2"  border style="width: 100%">
            <el-table-column prop="locationId" label="市级编号" width="200"></el-table-column>
            <el-table-column fixed prop="cityName" label="市级名称" width="200"></el-table-column>
            <el-table-column prop="confirmedCount" label="确诊人数" width="150"></el-table-column>
            <el-table-column prop="deadCount" label="死亡人数" width="150"></el-table-column>
        </el-table>

    </div>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                tableData1:[],
                tableData2:[]
            },
            methods:{
                
            },
            created(){  //初始化函数，无需调用直接运行
                //发送请求
                axios.get("js/quanguo.json")
                .then(res=>{
                    console.log(res)
                    for(i in res.data){
                        if(res.data[i].provinceName=='辽宁省'){
                            console.log('找到辽宁了，它的数组下标是'+i)
                            /*for(j in res.data[i].cities){
                                console.log(res.data[i].cities[j].cityName)
                            }*/
                            console.log(res.data[i].cities)
                            break
                        }
                    }
                    //将返回来的数据绑定到表格变量上
                    this.tableData1=res.data
                    this.tableData2=res.data[i].cities
                })
                
            }
        })
    </script>
</body>
</html>